<template>
  <d2-container better-scroll>
    <el-card shadow="never" class="d2-mb">
      <el-form
        class="filter-container"
        ref="searchData"
        :model="searchData"
        label-width="85px"
      >
        <el-row :gutter="20" style="height:30px">
          <el-col :span="5">
            <el-form-item label="币种">
              <el-select
                v-model="searchData.currency"
                placeholder="请选择"
                style="width:100%;"
                @change="examine"
                clearable
              >
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button
              type="default"
              size="mini"         
              style="margin-top:5px"
            >
              <d2-icon name="upload" />
              导出
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card shadow="never" class="d2-mb">
      <div id="exchange_rate_main" style="width:100%;height:650px;"></div>
    </el-card>
  </d2-container>
</template>

<script>
import { quotExchangeRate } from "@/api/url_info.js";
export default {
  //汇率
  name: "exchange_rate",
  components: {},
  data() {
    return {
      searchData: {
        currency: "USD"
      },
      options1: [
        {
          value: "USD",
          label: "美元"
        },
        {
          value: "EUR",
          label: "欧元"
        },
        {
          value: "JPY",
          label: "日元"
        },
        {
          value: "HKD",
          label: "港币"
        }
      ]
    };
  },
  created() {
    this.search();
  },
  mounted() {
    this.examine();
  },
  methods: {
    search() {
      this.examine();
    },
    async examine() {
      await quotExchangeRate(this.searchData)
        .then(res => {
          this.$nextTick(() => {
            let dates = [],
              rate = [];
            let data = res.result;
            let myChart = this.$echarts.init(document.getElementById("exchange_rate_main"));
            for (var i = 0; i < data.length; i++) {
              dates.push(data[i]["spddate"]);
              if (this.searchData.currency == "USD") {
                rate.push(data[i]["USD"]);
              } else if (this.searchData.currency == "EUR") {
                rate.push(data[i]["EUR"]);
              } else if (this.searchData.currency == "JPY") {
                rate.push(data[i]["JPY"]);
              } else if (this.searchData.currency == "HKD") {
                rate.push(data[i]["HKD"]);
              }
            }
            myChart.setOption({
              tooltip: {
                trigger: "axis"
              },
              xAxis: {
                type: "category",
                data: dates
              },
              yAxis: {
                max: function(value) {
                  return (value.max + 0.01 * value.min).toFixed(2);
                },
                min: function(value) {
                  return (value.min - 0.01 * value.min).toFixed(2);
                }
              },
              series: [
                {
                  data: rate,
                  type: "line",
                  symbol: "none"
                }
              ]
            });
          });
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    }
  }
};
</script>
<style></style>
